<template>
  <div class="main">
    <eagle-input
      label="化学品名称"
      v-model="data.ChemName"
      name="area"
      required
    >
    </eagle-input>
    <eagle-input
      label="使用量(kg,T,L/每年)"
      v-model="data.UseNum"
    > </eagle-input>
    <eagle-input
      label="供应商"
      v-model="data.Supplier"
    > </eagle-input>
    <eagle-input
      label="联系电话"
      v-model="data.SupolierTel"
    > </eagle-input>

    <eagle-input
      class="input_text"
      name="calendar"
      v-model="data.ChemManagerChnName"
      label="化学品管理员"
      placeholder="请选择"
      @click-input="goMannerItem"
      readonly
      required
    >
      <template #button>
        <van-icon
          name="cross"
          @click="clearUserName"
        />
      </template>
    </eagle-input>
    <eagle-input
      readonly
      class="input_text"
      name="calendar"
      v-model="data.UseOrgName"
      label="化学品使用部门"
      placeholder="请选择"
      @click-input="goDeptment"
    >
      <template #button>
        <van-icon
          name="cross"
          @click="clearOrgCode"
        />
      </template>
    </eagle-input>
    <eagle-input
      name="UsePlace"
      label="使用地点"
      v-model="data.UsePlace"
      isInputText
    ></eagle-input>
    <eagle-input
      name="Storage"
      label="最大存储量"
      v-model="data.Storage"
      isInputText
    ></eagle-input>
    <eagle-input
      name="Location"
      label="存放地点"
      v-model="data.Location"
      isInputText
    ></eagle-input>
    <eagle-input
      name="ItemNo"
      label="物料号"
      v-model="data.ItemNo"
      isInputText
    ></eagle-input>
    <van-field
      class="input_text"
      name="checkboxGroup"
      label="是否属于危化品"
    >
      <template #input>
        <van-checkbox
          v-model="data.IsDanger"
          shape="square"
        ></van-checkbox>
      </template>
    </van-field>
    <eagle-checkgroup
      v-model="ChemistryProp2"
      :dataSource="ChemPropsList"
      label="其他属性"
      direction="horizontal"
      @change="ChemistryPropChange"
      class="input_text"
    ></eagle-checkgroup>
    <eagle-input
      label="自定义属性"
      v-if="whetherOrNotShownOtherProp"
      v-model="data.OtherProp"
    > </eagle-input>
    <eagle-input
      label="化学品危害特性"
      v-model="data.ChemicalHazardCharacteristics"
    > </eagle-input>
    <eagle-input
      label="急救措施"
      v-model="data.FirstAidMeasures"
    > </eagle-input>
    <eagle-input
      label="主要用途"
      v-model="data.Purpose"
    > </eagle-input>
    <eagle-input
      label="备注"
      rows="3"
      autosize
      type="textarea"
      v-model="data.Remarks"
    >
    </eagle-input>
    <van-collapse v-model="activeNames">
      <van-collapse-item name="1">
        <div slot="title">
          <div>
            <span class="title mr-30">主要成分</span>
            <span class="title-content">CAS No</span>
          </div>
        </div>
        <div
          slot="value"
          @click.stop="addDetails()"
        >
          <span class="valueclass">添加</span>
        </div>
        <div
          class="col-detail mb-10"
          v-for="(item, index) in data.Details"
          :key="index"
        >
          <span>{{ item.Component }}</span>
          <span>{{ item.CASNo }}</span>
          <div
            class="col-del"
            @click="del(index)"
          >
            <img src="@/assets/Images/AppIcon/icon_table_delete.png" />删除
          </div>
        </div>
      </van-collapse-item>
    </van-collapse>
    <div class="btn_submit">
      <eagle-button
        block
        type="info"
        @click="_submit"
      > 保存 </eagle-button>
    </div>
    <!-- 人员 -->
    <user-choose-dialog
      title="化学品管理员"
      :show.sync="userChooseDialogShow1"
      :tagData="userTagData"
      :IsAccounted="true"
      :isMulti="true"
      @callback="_chooseMannerItem"
      ref="userChoose"
    >
    </user-choose-dialog>
    <!-- 部门 -->
    <deptment-choose
      :show.sync="deptmentShow"
      :selectedValue="data.UseOrgCode"
      @callback="_chooseDeptmentCb"
      :isMulti="true"
      ref="deptmentChoose"
    >
    </deptment-choose>
    <!-- 弹出层 -->
    <van-dialog
      v-model="show"
      :showConfirmButton="false"
    >
      <div class="dialog-content">
        <div class="dialog-title">新增主要成分</div>
        <div class="dialog-content-text">
          <div class="gist-source">
            <van-field
              label="主要成分"
              v-model="Component"
            > </van-field>
          </div>
          <div class="gist-source">
            <van-field
              label="CAS No"
              v-model="CASNo"
            > </van-field>
          </div>
        </div>
        <div class="dialog-bottom">
          <div></div>
          <div>
            <span @click="close">取消</span>
            <span
              class="complete-btn"
              @click="confirm"
            >确定</span>
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import store from "@/store/index";
import DeptmentChoose from "@/views/components/department/departmentChooseDialog.vue";
import UserChooseDialog from "@/views/components/user/userChooseDialog.vue";
export default {
  components: {
    DeptmentChoose,
    UserChooseDialog,
  },
  data() {
    return {
      chemCode: this.$route.query.ChemCode,
      data: {
        ChemistryProp: [],
      },
      ChemistryProp2: [],
      IsDanger2: [],
      userTagData: [],
      userChooseDialogShow1: false,
      whetherOrNotShownOtherProp: false,
      deptmentShow: false,
      message: "",
      checkboxGroup: [],
      value: "",
      showCalendar: false,
      activeNames: ["1"],
      ChemPropsList: [
        { ID: "1", Name: "易制毒" },
        { ID: "2", Name: "重大危险源" },
        { ID: "3", Name: "剧毒" },
        { ID: "4", Name: "易制爆" },
        { ID: "5", Name: "其它伤害" },
      ],
      show: false,
      Component: "",
      CASNo: "",
    };
  },
  created() {
    this.data.Details = [];
    this.data.ChemManagerChnName = store.state.chnName;
    this.data.ChemManagerUserName = store.state.userName;
    let title = "新增危险化学品";
    if (this.chemCode) {
      this.getDetail();
      title = "编辑危险化学品";
    }
    store.commit("updateTitle", title);
    console.log(store.state.chnName, "管理员");
  },
  activated() {},
  methods: {
    clearUserName() {
      this.data.ChemManagerChnName = "";
      this.data.ChemManagerUserName = "";
      this.userTagData.splice(0, this.userTagData.length);
      this.userChooseDialogShow1 = false;
      //   this.$refs.userChoose.clearUserName();
    },
    clearOrgCode() {
      this.data.UseOrgCode = "";
      this.data.UseOrgName = "";
      this.$refs.deptmentChoose.clearOrgCode();
    },
    ChemistryPropChange() {
      ;
      var _this = this;
      _this.whetherOrNotShownOtherProp = false;
      _this.ChemistryProp2.find(function (value, index, arr) {
        if (value == "5") {
          _this.whetherOrNotShownOtherProp = true;
        }
      });
      _this.data.ChemistryProp = _this.ChemistryProp2.join();
    },
    goDeptment() {
      this.deptmentShow = true;
    },
    getDetail() {
      var _this = this;
      _this.$axios
        .get("/ChemChemistry/GetDetailChemistryEntity", {
          params: { chemCode: this.chemCode },
        })
        .then((res) => {
          _this.data = res.data;
          if (res.data.ChemManagerUserName) {
            let userTagData = res.data.ChemManagerUserName.split(",");
            for (var i = 0; i < userTagData.length; i++) {
              _this.userTagData.push({
                code: userTagData[i],
              });
            }
          }
          if (res.data.ChemistryProp) {
            _this.ChemistryProp2 = res.data.ChemistryProp.split(",");
          }
        });
    },
    // 保存
    _submit() {
      if (!this.data.ChemName) {
        this.$toast("请输入化学品名称");
        return;
      }
      if (!this.data.ChemManagerChnName) {
        this.$toast("请选择化学品管理员");
        return;
      }
      var formData = this.data;
      let _this = this;

      _this.$axios
        .post("/ChemChemistry/EditChem", formData)
        .then((res) => {
          _this.loading = false;
          _this.$toast.success("保存成功！");
          setTimeout(() => {
            _this.$router.goRefresh(-1);
          }, 300);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    goMannerItem() {
      this.userChooseDialogShow1 = true;
    },
    _chooseMannerItem(userlist) {
      if (userlist) {
        let ChemManagerChnName = [];
        let ChemManagerUserName = [];
        userlist.forEach((item) => {
          ChemManagerChnName.push(item.name);
          ChemManagerUserName.push(item.code);
        });
        this.data.ChemManagerChnName = ChemManagerChnName.join(",");
        this.data.ChemManagerUserName = ChemManagerUserName.join(",");
      }
      this.userChooseDialogShow1 = false;
    },
    _chooseDeptmentCb(data) {
      // 部门
      if (data) {
        let UseOrgCode = [];
        let UseOrgName = [];
        data.forEach((item) => {
          UseOrgName.push(item.name);
          UseOrgCode.push(item.code);
        });
        this.data.UseOrgName = UseOrgName.join(",");
        this.data.UseOrgCode = UseOrgCode.join(",");
      }
      this.deptmentShow = false;
    },
    addDetails() {
      this.show = true;
    },
    // 关闭
    close() {
      this.show = false;
    },
    confirm() {
      this.data.Details.push({
        Component: this.Component,
        CASNo: this.CASNo,
      });
      this.show = false;
    },
    del(index) {
      const _this = this;
      this.$dialog
        .confirm({
          title: "询问",
          message: "确定要执行删除吗？",
        })
        .then(() => {
          _this.data.Details.splice(index, 1);
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style lang="less" scoped>
.col-detail {
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .col-del {
    display: flex;
    align-items: center;
    img {
      width: 15px;
      height: 15px;
      margin-right: 5px;
    }
  }
}
.valueclass {
  color: rgb(0, 195, 224);
}
.dialog-content-text {
  height: auto;
}
</style>
